<!-- 设备参数 -->
<template>
  <div class="equip-wrap-common">
    <px-button v-if="type === 'edit'" type="primary" @click="addStats" style="margin-bottom: 8px">新增设备参数</px-button>
    <px-table :data="tableData" class="equip-table" size="small" border>
      <px-table-column type="index" label="序号" align="center" fixed="left" />
      <px-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :label="item.label"
        :min-width="item.minWidth"
        :align="item.align"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :fixed="item.fixed"
      >
        <template #default="scope">{{
          scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
        }}</template>
      </px-table-column>
      <px-table-column v-if="type === 'edit'" label="操作" align="center" width="120">
        <template #default="scope">
          <px-tooltip content="编辑" placement="top">
            <px-button size="large" link type="primary" icon="EditPen" @click="handleEditor(scope.row.id)" />
          </px-tooltip>
          <px-tooltip content="删除" placement="top">
            <px-button size="large" link type="danger" icon="Tickets" @click="handleDelete(scope.row)" />
          </px-tooltip>
        </template>
      </px-table-column>
    </px-table>
  </div>
  <!--新增设备参数弹窗-->
  <px-drawer v-model="addStatsVisible" :title="titleName" size="600">
    <px-form ref="ruleFormRef" :rules="rules" :model="formValue" :inline="true" class="demo-form-inline" label-width="120px">
      <px-form-item label="参数名称" prop="attributeName">
        <px-input v-model="formValue.attributeName" maxlength="50" placeholder="请输入参数名称" clearable />
      </px-form-item>
      <px-form-item label="参数值" prop="attributeValue">
        <px-input v-model="formValue.attributeValue" maxlength="50" placeholder="请输入参数值" clearable />
      </px-form-item>
      <px-form-item label="单位">
        <px-select v-model="formValue.valueUnit" placeholder="请选择单位" clearable filterable>
          <px-option v-for="dict in measureUnitList" :key="dict.id" :label="dict.name" :value="dict.value" />
        </px-select>
      </px-form-item>
      <px-form-item label="备注信息">
        <px-input v-model="formValue.remark" maxlength="1000" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="请输入备注信息" />
      </px-form-item>
    </px-form>
    <template #footer>
      <px-button @click="addStatsVisible = false">取消</px-button>
      <px-button type="primary" @click="addStatusList(ruleFormRef)">保存</px-button>
    </template>
  </px-drawer>
</template>

<script setup>
import { queryDictData } from "@/api/common";
import {
  delEquipmentAttribute,
  equipmentAttribute,
  getEquipmentAttribute,
  saveEquipmentAttribute,
  updateEquipmentAttribute
} from "@/api/equip/archive";
import { PxMessage, PxMessageBox } from "px-ui";
import { onMounted, reactive, ref, toRefs } from "vue";

const props = defineProps({
  eqpId: {
    type: String,
    default: ""
  },
  type: {
    type: String,
    default: "edit"
  }
});

const ruleFormRef = ref();
const addStatsVisible = ref(false);
const titleName = ref("新增设备参数");

const addStats = async () => {
  await getParams();
  addStatsVisible.value = true;
  titleName.value = "新增设备参数";
  formValue.value = {
    id: null,
    eqpId: 0,
    attributeName: "",
    attributeValue: "",
    valueUnit: "",
    remark: ""
  };
  ruleFormRef.value?.resetFields();
};
const handleEditor = async id => {
  await getParams();
  getEquipmentAttribute({ id: id }).then(res => {
    formValue.value = res;
    addStatsVisible.value = true;
    titleName.value = "编辑设备参数";
  });
};
const data = reactive({
  tableData: [],
  measureUnitList: [],
  formValue: {
    id: null,
    eqpId: 0,
    attributeName: "",
    attributeValue: "",
    valueUnit: "",
    remark: ""
  },
  rules: {
    attributeValue: [{ required: true, message: "参数值不能为空", trigger: ["blur", "change"] }],
    attributeName: [{ required: true, message: "参数名称不能为空", trigger: "blur" }]
  },
  tableColumns: [
    { prop: "attributeName", label: "参数名称", minWidth: "120", showOverflowTooltip: true },
    { prop: "attributeValue", label: "参数值", minWidth: "120", showOverflowTooltip: true },
    { prop: "valueUnitDesc", label: "单位", minWidth: "150", showOverflowTooltip: true },
    { prop: "remark", label: "备注信息", minWidth: "180", showOverflowTooltip: true }
  ]
});
const { tableData, measureUnitList, formValue, rules, tableColumns } = toRefs(data);

// 获取新增编辑属性时的下拉框数据
const getParams = async () => {
  measureUnitList.value = await queryDictData({ typeCode: "measureUnit" });
};

onMounted(() => {
  gettableData();
});

const gettableData = async () => {
  tableData.value = await equipmentAttribute({ attributeType: "STATIC", eqpId: props.eqpId });
};
function handleDelete(row) {
  PxMessageBox.confirm(`要删除当前参数名称“${row.attributeName}”吗？`, "提示", {
    confirmButtonText: "删除",
    confirmButtonClass: "px-button--danger",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      const params = {
        id: row.id
      };
      await delEquipmentAttribute(params);
      PxMessage.success("删除成功");
      gettableData();
    })
    .catch(() => {});
}

const addStatusList = async formEl => {
  if (!formEl) return;

  await formEl.validate(async valid => {
    if (valid) {
      if (titleName.value == "新增设备参数") {
        formValue.value.eqpId = props.eqpId;
        formValue.value.attributeType = "STATIC";
        saveEquipmentAttribute(formValue.value).then(response => {
          PxMessage.success("添加成功");
          addStatsVisible.value = false;
          gettableData();
        });
      }
      if (titleName.value == "编辑设备参数") {
        formValue.value.eqpId = props.eqpId;
        formValue.value.attributeType = "STATIC";
        updateEquipmentAttribute(formValue.value).then(response => {
          PxMessage.success("修改成功");
          addStatsVisible.value = false;
          gettableData();
        });
      }
    }
  });
};
</script>
<style scoped lang="scss">
@import url("@/views/all/equip/scss/table-list.scss");

.equip-wrap-common {
  box-sizing: border-box;
  height: calc(100vh - 278px);
  padding: 0;
  margin-top: 10px;
}
</style>
